<template>
    <div class="login-box">
        <el-form ref="ruleFormRef" :model="loginForm" status-icon :rules="rules" label-width="70px"
            class="demo-loginForm">
            <h1 class="title">登录系统</h1>
            <el-form-item label="账号" prop="userName">
                <el-input v-model="loginForm.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="sub-btn" @click="submitForm">登 录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue"
import type { FormRules } from 'element-plus'

export default defineComponent({
    setup() {
        const data = reactive({
            loginForm: {
                userName: "",
                password: ""
            }
        });

        const rules = reactive<FormRules>({
            userName: [{ required: true, message: '账号不能为空', trigger: 'blur' }, {
                min: 3, max: 5, message: '账号长度在3-6个字符之间', trigger: 'blur'
            }],
            password: [{ required: true, message: '密码不能为空', trigger: 'blur' },{
                min: 6, max: 24, message: '账号长度应在6-24个字符之间', trigger: 'blur'
            }]
        });

        const submitForm = function(){
            console.log(1111)
        }

        return {
            rules,
            submitForm,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 20%;
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages01%2F20210823%2Fd58e6dfff31d4e53a144eb043d7e3242.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660984544&t=4bff86dc5c4148ef09f2591f4818ab9f");
    .demo-loginForm{
        width: 400px;
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        margin: 0 auto;
    }
    .sub-btn{
        width: 100%;
    }
    .title{
        text-align: center;
        padding: 0 0 20px;
    }
}
</style>